<template>
  <div class="public">
    <div class="upload-box">
      <div class="tip">禁止上传涉黄、涉政等违法图片</div>
      <el-upload class="upload-demo" drag action="#" :before-upload="beforeAvatarUpload" :file-list="fileList" list-type="picture" >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip"  slot="tip">只能上传jpg/png/gif文件，且不超过100mb</div>
      </el-upload>
    </div>
    <Drawer @fromChild="del" :urls="urls" :loading='delLoading' />
  </div>
</template>

<script>
import Drawer from '@/components/Drawer'
import * as gitee from '@/api/gitee'
import * as utils from '@/utils'
export default {
  name: 'Public',
  components: {
    Drawer
  },
  data() {
    return {
      urls: [],
      fileList:[],
      user:{},
      imgUrl:'',
      delLoading:false
    }
  },
  mounted() {
    if (this.$store.state.login) {
        this.user= this.$store.state.user
        this.imgUrl = `https://gitee.com/${this.user.owner}/${this.user.repo}/raw/master/`,
        this.getImgList()
      } else {
        this.$router.push('/')
      }
  },
  methods: {
    getImgList() {
      gitee.trees(this.user.owner, this.user.repo).then(res => {
      this.urls = res.data.tree.map(item => {
        return {
          imgUrl:item.path.indexOf('.md')===-1? `${this.imgUrl}${item.path}`:'',
          path: item.path
        }
      })
    })
    },
    beforeAvatarUpload(file) {
      const isJPG =
        file.type == 'image/jpeg' ||
        file.type == 'image/png' ||
        file.type == 'image/gif'
      const isLt2M = file.size / 1024 /1024 < 100
      if (!isJPG) {
        this.$message.warning('上传图片只能是 JPG/PNG/GIF 格式!')
        return isJPG
      }
      if (!isLt2M) {
        this.$message.warning('上传图片大小不能超过 100mb!')
        return isLt2M
      }
      utils.getBase64(file).then(resBase64 => {
        let data = {
          access_token:this.user.token,
          content:resBase64.split(',')[1],
          message:'码云图床'
        }
        gitee.updata(this.user.owner, this.user.repo,file.name,data).then(doc => {
          let date = {
            name:doc.data.content.name,
            url:doc.data.content.download_url
          }
          this.fileList.push(date)
          this.getImgList()
        })
      })
      // 
    },
    del(item) {
      this.delLoading = true
      gitee.getSha(this.user.owner, this.user.repo,item.path).then( res => {
        if (res.status === 200) {
          gitee.del(this.user.owner, this.user.repo,item.path,{access_token:this.user.token,sha:res.data.sha,message:'码云图床删除'}).then(doc=> {
             if (doc.status === 200) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.getImgList()
              this.delLoading = false
             }
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>


.upload-box {
  width: 50rem;
  text-align: center;
  margin: 0 auto;
}

.tip {
  font-size: 22px;
  color: #2c3e50;
  margin: 5.75rem 0 3.5rem 0;
}
</style>
